<template>
	<view>
		<!-- <page-head ref="pageHead" :title="'森歌微商城-行为记录'" :headtype="2"></page-head> -->
			<view class="flex-s Blue">
				<view class="ordernavmain">
					<view class="ordereach" :class="activenav == 0 ? 'activenav':''" @click="navclick(0)">待审核</view>
					<view class="ordereach" :class="activenav == 1 ? 'activenav':''" @click="navclick(1)">已通过</view>
					<view class="ordereach" :class="activenav == 2 ? 'activenav':''" @click="navclick(2)">未通过</view>
					<!-- <view class="ordereach" :class="activenav == 2 ? 'activenav':''" @click="navclick(2)">售后记录</view> -->
				</view>
			</view>
		<view class="mescrollBox">
			<mescroll-body ref="mescrollRef" :up="{
					  	noMoreSize: 10,
					  	empty: {
					  		icon: '/static/image/order_null.png',
					  		tip: '暂无数据~',
					  		fixed: false
					  	}
					  }" @init="mescrollInit" @down="downCallback" @up="upCallback">
				<view class="mybg">
					<view class="contentbox">
						<view class="row " v-for="(item,index) in dataList">
							<view class="flex">
								<u-image :src="item.user_info.avatar" border-radius="50%" width="100rpx" height="100rpx" />
								<view class="fans-info m-l-20" style="width: 330rpx;">
									<view class="flex-s fanbox">
										<view class="fans-name bold ">{{item.user_info.nickname}}</view>
									</view>
									<view class="flex lighter" style=" margin-top: 6rpx; font-size: 24rpx; color: #8f8f8f">
										<!-- <view v-if="item.user_info.mobile" class="m-r-20">{{item.mobile}}</view> -->
										<view>{{item.apply_time}}</view>
									</view>
								</view>
								<view class="referrer flex-start">
									<view class="verify" @click="taginfo(item.id,2)" v-if="userLevel==4 && activenav == 0">拒绝</view>
									<view class="verify" @click="audit(item.id,1)" v-if="userLevel==4 && activenav == 0" style="background-color: #0079f3;margin-left: 20rpx;">同意</view>
									<view class="verify" v-if="activenav == 1" style="background-color: #5ae180;margin-left: 60rpx;">已通过</view>
									<view class="verify" v-if="activenav == 2" style="background-color: #afafaf;margin-left: 60rpx;">未通过</view>
								</view>
							</view>
							<view class="jjly" v-if="activenav == 2">
								拒绝理由：{{item.denial_reason}}
							</view>
						</view>
					</view>

				</view>
			</mescroll-body>
			<uni-popup ref="center" type="center">
				<view class="cenpopup">
					<view class="taghint">填写拒绝理由</view>
					<view class="">
						<textarea v-model="denial_reason" name="" id="" cols="30" rows="2" placeholder="请输入"></textarea>
					</view>
					<view class="flex-s cli_box">
						<view class="cli" style="background-color: #afafaf;" @click="$refs.center.close()">取消</view>
						<view class="cli" style="background-color: #0079f3;" @click="confirm()">确定</view>
					</view>
				</view>
			</uni-popup> 
		</view>
	</view>
</template>

<script>
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins";
	import MescrollMoreItemMixin from "@/components/mescroll-uni/mixins/mescroll-more-item";
	import {audit,ApplyList} from '@/api/user'
	export default {
		mixins: [MescrollMixin, MescrollMoreItemMixin],
		data() {
			return {
				dataList:[],
				activenav: 0,
				id: '',
				audit_status: '',
				denial_reason: '',
				userLevel: "",
			}
		},
		onLoad(option) {
			this.id= option.id
			this.userLevel =uni.getStorageSync('userInfo').level
			// this.getkhaccountLog()
		},
		methods: {
			taginfo(id,e){
				this.$refs.center.open()
				this.audit_status =e
				this.id =id

			},
			confirm(){
				if(this.denial_reason == ''){
					this.apifun.toast('请填写拒绝理由')
					return
				}
				this.audit(this.id,this.audit_status)
				
				this.$refs.center.close()
				this.denial_reason = ''
			},
			audit(id,e){
				// if(e==1){
				// 	this.apifun.toast('同意成功 ')
				// }
				// console.log(id,e)
				audit({
					audit_status: e,
					denial_reason: this.denial_reason,
					id: id,
				}).then(({
					data,
					msg
				}) => {
					this.apifun.toast(msg)
					this.downCallback() 
					// this.dataList = this.dataList
				})
			},
			upCallback(page) {
				let pageNum = page.num; // 页码, 默认从1开始
				let pageSize = page.size; // 页长, 默认每页10条
				ApplyList({
					status: this.activenav,
					page_size: pageSize,
					page_no: pageNum,
				}).then(({
					data
				}) => {
					let curPageData = data.list;
					let curPageLen = curPageData.length;
					let hasNext = !!data.more;
					if (page.num == 1) this.dataList = [];
					this.dataList = this.dataList.concat(curPageData);
					this.mescroll.endSuccess(curPageLen, hasNext);
				})
			},
			
			navclick(type) { //切换状态
				let that = this;
				that.activenav = type;
				that.dataList = []
				// that.getkhaccountLog()
				// if(type ==0){
					that.downCallback()
				// }
				// if(type ==1){
				// 	that.downCallback()
				// }
			},
		}
	}
</script>
<style>
	.jjly{
		font-size: 24rpx;
		color: #8f8f8f;
		margin-top: 20rpx;
		margin-left: 10rpx;
	}
	.cli{
		color: #fff;
		padding: 10rpx 30rpx;
		border-radius: 8rpx;
	}
	.cli_box{
		width: 60%;
		padding: 50rpx;
		margin: 0 auto;
	}
	textarea{
		width: 85%;
		height: 126rpx;
		padding: 8rpx 16rpx;
		border: 1rpx solid #e7e7e7;
		border-radius: 10rpx;
		margin-left: 32rpx;
	}
	.taghint{
		text-align: center;
		padding: 38rpx;
		font-size: 30rpx;
	}
	.cenpopup{
		width: 670rpx;
		border-radius: 16rpx;
		background-color: #fff;
		
	}
</style>
<style>
	page{
		background-color: #f4f4f4;
	}
	.mybg{
		position: relative;
	}
	.bgimg{
		width: 100%;
		height: 300rpx;
	}
	.head{
		width: 100rpx;
		height: 100rpx;
		border-radius: 50rpx;
		margin-right: 20rpx;
	}
	.userinfo{
		width: 100%;
		position: absolute;
		top: 36rpx;
	}
	.sets image{
		width: 44rpx;
		height: 42rpx;
		margin-left: 22rpx;
	}
	.topinfo image{
		width: 42rpx;
		height: 40rpx;
	}
	.topinfo {
		position: relative;
	}
	.infonumber{
		background-color: #ff9200;
		font-size: 22rpx;
		color: #fff;
		width: 28rpx;
		height: 28rpx;
		line-height: 28rpx;
		text-align: center;
		border-radius: 30rpx;
		top: -18rpx;
		right: -10rpx;
	}
	.nametop{
		width: 560rpx;
/* 		background-color: antiquewhite; */
	}
	.name{
		font-size: 32rpx;
		color: #fff;
		margin-bottom: 18rpx;
	}
	.vip{
		width: 120rpx;
		text-align: center;
		border-radius: 50rpx;
		font-size: 20rpx;
		background-color: #fff;
		color: #f3505c;
	}
	.content{
		margin-bottom: 30rpx;
		/* padding: 26rpx; */
		width: 690rpx;
		box-sizing: border-box;
		position: absolute;
		top: 30rpx;
	}
	.ordernavmain {
		width: 75%;
		display: flex;
		justify-content: space-between;
		margin: 0 auto;
		/* background-color: aqua; */
	}
	.ordereach {
		position: relative;
		color: #0A0A0A;
		font-size: 24rpx;
		width: 130rpx;
		padding: 8rpx;
		text-align: center;
		border-radius: 40rpx;
	}
	.activenav {
		color: #fff;
		background-color: #f3505c;
	}
	.calendar{
		font-size: 30rpx;
		color: #1d1d1d;
		margin-top: -4rpx;
		font-weight: 900;
	}
	.cease{
		font-size: 28rpx;
	}
	.contentbox{
		margin: 0 26rpx;
		margin-top: 50rpx;
		padding-bottom: 20rpx;
	}
	.row{
		margin-bottom: 20rpx;
		background-color: #fff;
		box-shadow: 0px 0px 6rpx 0px rgba(140,140,140,0.13);
		border-radius: 10rpx;
		padding: 30rpx 14rpx;
	}

	.arrows{
		margin-right: 20rpx;
		font-size: 22rpx;
		font-weight: 900;
		color: #f3505c;
	}
	.rowtitle{
		font-size: 28rpx;
		color: #606060;
	}
	.time{
		font-size: 24rpx;
		color: #606060;
		margin-top: 10rpx;
		margin-left: 44rpx;
	}
	.digdig{
		margin-top: 32rpx;
	}
	.row_ri{
		font-size: 36rpx;
		color: #5d5d5c;
	}
	.rowtopimg{
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		margin-right: 20rpx;
	}
	.nickname{
		font-size: 30rpx;
		color: #753f32;
	}
	.rowtopinfo{
		padding: 26rpx;
		/* margin-bottom: 26rpx; */
	}
	.Blue{
		padding: 34rpx 26rpx; 
		background-color: #fff;
		border-radius: 12rpx;
	}
	.bgimg{
		width: 100%;
		height: 300rpx;
	}
	.mescrollBox{
		margin-top: -26rpx;
	}
	.vip_img{
		width: 160rpx;
		height: 44rpx;
	}
	.verify{
		background-color: #f3505c;
		color: #fff;
		padding: 4rpx 20rpx;
		border-radius: 8rpx;
	}
</style>
